// 新增模块导入（文件顶部添加）
@use "sass:map";

// /* 默认明亮主题 */
// :root[data-theme="light"] {
//     --background-color: #ffffff;
//     --text-color: #303133;
// }
//
// /* 暗黑主题 */
// :root[data-theme="dark"] {
//     --background-color: #1f1f1f;
//     --text-color: #eaeaea;
// }
//
// body {
//     background-color: var(--background-color);
//     color: var(--text-color);
// }

// 当前主题名称
$currentThemeName: "";

// 主题配置
$themes: (
    light: (
        background-color: #fff,
        text-color: #303133,
    ),
    dark: (
        background-color: #1f1f1f,
        text-color: #eaeaea,
    )
);

// 循环主题配置
@mixin useTheme()
{
    @each $key, $value in $themes
    {
        $currentThemeName: $key !global;

        html[data-theme="#{$key}"] &
        {
            @content;
        }
    }
}

// 获取变量
@function getVar($key)
{
    // 获取当前主题对应变量值
    $themeMap: map.get($themes, $currentThemeName);

    @return map.get($themeMap, $key);
}

// 主体样式
body
{
    @include useTheme
    {
        background-color: getVar("background-color");
        color: getVar("text-color");
    }
}

#app
{
    width: 100vw;
    height: 100vh;
}